
.page-cart {
	.step-box {
		.left {
			.img {
				background: url(@/assets/images/icons.png) no-repeat 0 -249px;
			}
		}
	}
	.cart-tab {
		padding: 12px 0;
		border: 1px solid #eee;
		background-color: #f9f9f9;
		display: flex;
		line-height: 14px;
		.tab-check {
			width: 100px;
			.checkbox {
				margin-left: 15px;
			}
			.text {
				display: inline-block;
				vertical-align: top;
				margin-left: 5px;
			}
		}
		.tab-img {
			width: 90px;
		}
		.tab-name {
			width: 370px;
		}
		.tab-price {
			width: 140px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.tab-number {
			width: 150px;
			text-align: center;
			padding-left: 40px;
		}
		.tab-total {
			width: 160px;
			text-align: center;
			padding-right: 40px;
		}
		.tab-action {
			width: 80px;
			text-align: left;
		}
	}
	.cart-con {
		.tab-img {
			width: 90px;
		}
		.tab-check {
			.checkbox {
				margin-left: 15px;
			}
			width: 44px;
		}
		.item {
			.tab-price {
				width: 140px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				justify-content: center;
				.unit-price {
					font-family: verdana;
				}
				.promotion-box {
					position: relative;
					display: inline-block;
					margin-top: 5px;
					.p-tit {
						display: inline-block;
						border: 1px solid #e1251b;
						color: #e1251b;
						height: 18px;
						text-align: left;
						line-height: 20px;
						padding: 0 15px 0 5px;
						position: relative;
						background-color: #fff;
						cursor: pointer;
						&::before {
							position: absolute;
							right: 5px;
							top: 7px;
							display: block;
							width: 0;
							height: 0;
							content: ' ';
							border: 4px solid transparent;
							border-top: 4px solid #e1251b;
							border-radius: 2px;
						}
					}
					.p-con {
						position: absolute;
						left: 0px;
						top: 19px;
						padding: 10px 14px 10px 10px;
						width: 276px;
						height: 210px;
						z-index: 30;
						box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
						border: 1px solid #e1251b;
						background: #fff;
						text-align: left;
						&::before {
							position: absolute;
							left: 0;
							top: -1px;
							display: block;
							width: 44px;
							height: 1px;
							background: #fff;
							content: ' ';
						}
						.p-items-con {
							height: 180px;
							overflow-y: auto;
						}
						.p-item {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							margin-top: 6px;
							cursor: pointer;
							.radio {
								margin-right: 5px;
								cursor: pointer;
							}
							.p-info {
								word-break: break-all;
								line-height: 1.5em;
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								cursor: pointer;
							}
						}
						.p-btns {
							margin-top: 10px;
							display: flex;
							justify-content: center;
							.sure {
								padding: 3px 10px;
								border-radius: 2px;
								color: #fff;
								background: #e1251b;
								&:hover {
									opacity: 0.9;
								}
							}
							.cancel {
								padding: 3px 10px;
								border-radius: 2px;
								border: 1px solid #eee;
								background: #f7f7f7;
								margin-left: 10px;
								&:hover {
									background: #fff;
								}
							}
						}
					}
				}
			}
			padding: 15px 0;
			border: 1px solid #eee;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: -1px;
			position: relative;
			.item-goods {
				width: 100%;
				display: flex;
				align-items: center;
			}
			.tab-img {
				width: 90px;
				.img-box {
					display: block;
					width: 80px;
					height: 80px;
					font-size: 0;
					position: relative;
					img {
						width: 100%;
						height: 100%;
						vertical-align: top;
					}
					.undelivered-tag {
						display: block;
						width: 80px;
						height: 20px;
						line-height: 20px;
						font-size: 12px;
						text-align: center;
						color: #fff;
						position: absolute;
						bottom: 0;
						background-color: rgba(0, 0, 0, 0.5);
					}
				}
			}
			.tab-name {
				line-height: 20px;
				align-self: flex-start;
				width: 426px;
				.name {
					word-break: break-all;
					max-width: 380px;
					max-height: 36px;
					line-height: 18px;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					&:hover {
						color: #e1251b;
					}
				}
				.sku {
					max-width: 380px;
					height: 20px;
					display: block;
					margin-top: 10px;
					color: #999;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.tab-number {
				.goods-number {
					.reduce {
						display: inline-block;
						vertical-align: top;
						width: 30px;
						height: 30px;
						background: #f5f5f5;
						font-size: 22px;
						text-align: center;
						line-height: 26px;
						color: #999;
						cursor: pointer;
						border-radius: 50%;
						-moz-user-select: none;
						-webkit-user-select: none;
						-ms-user-select: none;
						-khtml-user-select: none;
						user-select: none;
					}
					.increase {
						display: inline-block;
						vertical-align: top;
						width: 30px;
						height: 30px;
						background: #f5f5f5;
						font-size: 22px;
						text-align: center;
						line-height: 26px;
						color: #999;
						cursor: pointer;
						border-radius: 50%;
						-moz-user-select: none;
						-webkit-user-select: none;
						-ms-user-select: none;
						-khtml-user-select: none;
						user-select: none;
					}
					.limit {
						cursor: not-allowed;
						color: #ccc;
					}
					.number {
						border: 0;
						width: 40px;
						height: 30px;
						text-align: center;
						font-family: arial,sans-serif;
						vertical-align: top;
						background: transparent;
						/* 火狐兼容 取消[type='number']的input的上下箭头 */
  					-moz-appearance: textfield;
					}

					/* 取消[type='number']的input的上下箭头 */
					input::-webkit-inner-spin-button {
						-webkit-appearance: none !important;
					}
					
					input::-webkit-outer-spin-button {
						-webkit-appearance: none !important;
					}

				}
			}
			.tab-total {
				color: #e1251b;
				font-weight: 600;
				font-family: verdana;
			}
			.tab-action {
				.action-a {
					display: block;
					-moz-transition: all 0.2s;
					-webkit-transition: all 0.2s;
					-o-transition: all 0.2s;
					transition: all 0.2s;
					&:hover {
						color: #e1251b;
					}
				}
				.collect {
					margin-bottom: 5px;
				}
				.del {
					color: #999;
				}
			}
		}
		.tab-number {
			width: 150px;
			text-align: center;
			padding-left: 40px;
		}
		.tab-total {
			width: 160px;
			text-align: center;
			padding-right: 40px;
		}
		.shop-box {
			height: 24px;
			line-height: 24px;
			border-bottom: 1px solid #eee;
			padding: 20px 0 15px;
			.shop-msg {
				display: inline-block;
				margin-left: 16px;
				width: 48%;
				.checkbox {
					margin-right: 5px;
					margin-top: 5px;
				}
				.self {
					background: #e1251b;
					color: #fff;
					padding: 1px 3px;
					display: inline-block;
					height: 14px;
					line-height: 14px;
					border-radius: 2px;
					margin-right: 5px;
					margin-top: 4px;
					vertical-align: top;
				}
				.shop-name {
					display: inline-block;
					vertical-align: top;
					font-weight: 700;
				}
			}
			.shop-coupon {
				display: inline-block;
				vertical-align: top;
				margin-left: 5px;
				position: relative;
				.coupon-tit {
					display: inline-block;
					width: 58px;
					height: 24px;
					line-height: 24px;
					padding-left: 18px;
					position: relative;
					cursor: pointer;
					border-radius: 2px;
					color: #e1251b;
					background: url(@/assets/images/icons.png) no-repeat 0 -386px;
					&::before {
						position: absolute;
						top: 10px;
						right: 10px;
						display: block;
						width: 0;
						height: 0;
						content: ' ';
						border: 4px solid transparent;
						border-radius: 2px;
						border-top: 4px solid #e1251b;
					}
				}
				.coupon-con {
					position: absolute;
					top: 39px;
					left: 0;
					background: #fff;
					border: 1px solid #e1251b;
					box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
					padding: 10px 0 10px 15px;
					width: 278px;
					z-index: 10;
					display: none;
					&::before {
						position: absolute;
						top: -17px;
						left: 30px;
						display: block;
						width: 0;
						height: 0;
						content: ' ';
						border: 8px solid transparent;
						border-bottom: 8px solid #df0b00;
					}
					&::after {
						position: absolute;
						top: -17px;
						left: 30px;
						display: block;
						width: 0;
						height: 0;
						content: ' ';
						border: 8px solid transparent;
						top: -16px;
						border-bottom: 8px solid #fff;
					}
					.coupon-box {
						max-height: 250px;
						overflow-y: auto;
					}
					.coupon-item {
						padding: 5px 0;
						height: 40px;
						display: flex;
						align-items: center;
						.price {
							display: inline-block;
							width: 46px;
							height: 22px;
							padding: 0 3px;
							color: #fff;
							line-height: 22px;
							text-align: center;
							white-space: nowrap;
							border: 1px dashed #fff;
							border-top: 0;
							border-bottom: 0;
							background: #e1251b;
							font-weight: 600;
							.big {
								font-size: 14px;
								margin-left: 2px;
							}
						}
						.info {
							height: 30px;
							margin-left: 10px;
							line-height: 15px;
							.name {
								display: block;
								width: 130px;
								height: 15px;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								color: #000;
								font-family: arial;
							}
							.time {
								display: block;
								font-family: arial;
								color: #999;
								height: 12px;
								line-height: 12px;
								margin-top: 3px;
							}
						}
						.btn {
							height: 24px;
							line-height: 24px;
							border: 1px solid #ddd;
							margin-top: 7px;
							width: 50px;
							text-align: center;
							color: #666;
							border-radius: 2px;
							margin-left: 15px;
							&:hover {
								border-color: #e1251b;
								color: #e1251b;
							}
						}
						.btn.active {
							color: #999;
							border: 0;
							cursor: default;
						}
					}
				}
			}
			.shop-coupon.active {
				.coupon-tit {
					&:before {
						transform: rotate(180deg);
						top: 6px;
					}
				}
				.coupon-con {
					display: block;
				}
			}
		}
		.activity-msg {
			display: flex;
			border: 1px solid #eee;
			border-width: 0 1px;
			padding: 10px 22px;
			align-items: center;
			position: relative;
			min-height: 50px;
			box-sizing: border-box;
			.a-info {
				width: 880px;
				display: flex;
				align-items: center;
				.icon {
					padding: 1px 7px;
					height: 16px;
					line-height: 16px;
					background: #e1251b;
					color: #fff;
					position: relative;
					&::after {
						position: absolute;
						left: 0;
						bottom: -3px;
						display: block;
						width: 0;
						height: 0;
						content: ' ';
						font-size: 0;
						border-top: 3px solid #e1251b;
						border-right: 6px solid transparent;
					}
				}
				.text {
					margin-left: 10px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.text-red {
					color: #e1251b;
				}
				.link {
					margin-left: 10px;
					.arr {
						font-family: Consolas;
					}
					&:hover {
						color: #e1251b;
					}
				}
			}
			.a-price {
				text-align: right;
				min-width: 100px;
				.discount {
					color: #e1251b;
				}
			}
		}
		.item.active {
			background: #fffcf8;
			.tab-number {
				.goods-number {
					.reduce {
						background: #fff;
					}
					.increase {
						background: #fff;
					}
				}
			}
		}
		.shop-box.invalid {
			.shop-msg {
				.checkbox {
					display: none;
				}
			}
			.shop-coupon {
				display: none;
			}
		}
		.item.invalid {
			.tab-check {
				.checkbox {
					display: none;
				}
				.invalid-text {
					background: #dadada;
					color: #5f5f5f;
					margin-left: 20px;
					text-align: center;
					border-radius: 1px;
				}
			}
			.tab-name {
				.name {
					&:hover {
						color: #ccc;
					}
				}
				.sku {
					color: #ccc;
				}
			}
			.tab-price {
				color: #ccc;
			}
			.tab-total {
				color: #ccc;
			}

			.item-box {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: -1px;
				color: #ccc;
				.tab-check{
					display: flex;
					justify-content: center;
					.invalid-text{
						margin-left: 0;
					}
				}
			}
			.item-box.active {
				background-color: #fffcf8;
			}
		}
	}
	.cart-bottom {
		display: flex;
		border: 1px solid #eee;
		margin-top: 30px;
		align-items: center;
		.total-box {
			flex: 1;
			display: flex;
			.check-all {
				margin-left: 16px;
				height: 14px;
				line-height: 14px;
				cursor: pointer;
				.text {
					display: inline-block;
					vertical-align: top;
					margin-left: 5px;
				}
			}
			.del-selected {
				margin-left: 20px;
				line-height: 14px;
				display: inline-block;
				vertical-align: top;
				-moz-transition: all 0.2s;
				-webkit-transition: all 0.2s;
				-o-transition: all 0.2s;
				transition: all 0.2s;
				&:hover {
					color: #e1251b;
				}
			}
			.clear-invalid {
				margin-left: 20px;
				line-height: 14px;
				display: inline-block;
				vertical-align: top;
				-moz-transition: all 0.2s;
				-webkit-transition: all 0.2s;
				-o-transition: all 0.2s;
				transition: all 0.2s;
				&:hover {
					color: #e1251b;
				}
			}
		}
		.settlement-box {
			display: flex;
			position: relative;
			padding-right: 93px;
			.amount {
				line-height: 20px;
				.number {
					font-family: verdana;
					color: #e1251b;
					margin: 0 3px;
				}
			}
			.price-box {
				height: 44px;
				line-height: 20px;
				margin: 6px 15px 0;
				.total-price {
					.text {
						font-size: 16px;
						color: #e1251b;
						font-family: verdana;
						font-weight: 700;
						display: inline-block;
						vertical-align: top;
					}
				}
				.discount-price {
					display: block;
					text-align: right;
					font-family: verdana;
				}
			}
			.btn {
				position: absolute;
				top: -1px;
				right: -1px;
				display: block;
				width: 94px;
				height: 52px;
				line-height: 52px;
				color: #fff;
				text-align: center;
				font-size: 16px;
				background: #e1251b;
				font-weight: 600;
				&:hover {
					opacity: 0.9;
				}
			}
		}
	}
  .activity-goods-checked {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      left: 22px;
      top: 0;
      bottom: 0;
      width: 0;
      border-left: 1px dashed #ddd;
      z-index: 0;
    }
  }
  .combo-msg {
    display: flex;
    width: 1200px;
    padding: 10px 0;
    box-sizing: border-box;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    align-items: center;
    text-align: center;
  }
  .combo-info {
    display: flex;
    width: 560px;
    padding-left: 22px;
    box-sizing: border-box;
    .combo-icon {
      padding: 1px 7px;
      height: 16px;
      line-height: 16px;
      background: #e1251b;
      color: #fff;
      position: relative;
      &::after {
        position: absolute;
        left: 0;
        bottom: -3px;
        display: block;
        width: 0;
        height: 0;
        content: ' ';
        font-size: 0;
        border-top: 3px solid #e1251b;
        border-right: 6px solid transparent;
      }
    }
    .combo-name {
      margin: 0 10px;
    }
    .combo-reduce {
      color: #e1251b;
    }
  }
  .combo-unit-price {
    width: 140px;
    font-family: verdana;
  }
  .combo-count {
    width: 150px;
    margin-left: 40px;
    .reduce {
      display: inline-block;
      vertical-align: top;
      width: 30px;
      height: 30px;
      background: #f5f5f5;
      font-size: 22px;
      text-align: center;
      line-height: 26px;
      color: #999;
      cursor: pointer;
      border-radius: 50%;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;
    }
    .increase {
      display: inline-block;
      vertical-align: top;
      width: 30px;
      height: 30px;
      background: #f5f5f5;
      font-size: 22px;
      text-align: center;
      line-height: 26px;
      color: #999;
      cursor: pointer;
      border-radius: 50%;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;
    }
    .limit {
      cursor: not-allowed;
      color: #ccc;
    }
    .number {
      border: 0;
      width: 40px;
      height: 30px;
      text-align: center;
      font-family: arial;
      vertical-align: top;
      background: transparent;
    }
		
		/* 取消[type='number']的input的上下箭头 */
		input::-webkit-inner-spin-button {
			-webkit-appearance: none !important;
		}
		
		input::-webkit-outer-spin-button {
			-webkit-appearance: none !important;
		}
  }
  .combo-total-price {
    width: 160px;
    margin-right: 40px;
    color: #e1251b;
    font-weight: 600;
    font-family: verdana;
  }
  .combo-del-btn {
    color: #999;
    cursor: pointer;
    &:hover {
      color: #e1251b;
    }
  }
  .gift-con {
    width: 100%;
    padding: 10px 0 0 45px;
    box-sizing: border-box;
  }
  .gift-item {
    max-width: 468px;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .gift-item-name {
    &:hover {
      color: #e1251b;
    }
    .gift-item-sku-name {
      color: #999;
      margin-left: 10px;
    }
  }
}
